<template>
  <div id="app">
    <div class="order-list">
      <h1><em class="baseColor">预购中</em> <span class="fr">订单号：5147896534kie6587964</span></h1>
      <div class="order-list-box">
        <div>
          <img src="https://photo.kkgold.com/photoserver/images/3/2018/12/19/fd86b6e2-6285-47f2-ab98-b9c4c09c0908.jpg"
               alt="">
        </div>
        <ul>
          <li>足金9999 发发金投资金条 5000克</li>
          <li>规格：<em class="redColor">5000g</em></li>
          <li>货值增减：<em class="redColor">+500.00 / -500.00</em> <span class="fr">数量：x1</span></li>
        </ul>
      </div>
    </div>
    <ul class="pay">
      <li>支付方式<span>余额支付</span></li>
      <li>预订单类型<span class="baseColor">预订/回购</span></li>
      <li>商品总额<span class="redColor">¥30866.00</span></li>
      <li>订金金额<span class="redColor">¥30866.00</span></li>
      <li>服务费<span class="redColor">¥32.50</span></li>
      <li>金豆<span class="redColor">2.50</span></li>
      <li>订购价/回购价（元/g）<span class="redColor">¥273.390</span></li>
      <li>实时价（元/g）<span class="redColor">¥273.430</span></li>
      <li>货值增减<span class="redColor">+¥300.00 / -¥300.00</span></li>
      <li>益比<span class="redColor">10%</span></li>
      <li>损比<span class="redColor">20%</span></li>
      <li>商品优惠<span>-¥0.00</span></li>
      <li class="clearfix"><span>有效订金：<em class="baseColor">¥217.50</em></span></li>
      <li class="clearfix"><span class="grayColor">下单时间：2017-11-28 17:34:25</span></li>
    </ul>
    <div class="funBtn">
      <a>退订</a>
      <a>提货/交货</a>
      <a>首页</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "order-detail",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
  }
</script>

<style lang="less" scoped>
  #app {
    .order-list {
      background: #fff;
      margin-bottom: 0.5rem;
      border-top: 1px solid #dcdcdc;
      h1 {
        line-height: 1.92rem;
        font-size: 0.512rem;
        font-weight: normal;
        padding: 0 0.5rem;
        border-bottom: 1px solid #dcdcdc;
        span {
          font-size: 0.426rem;
        }
      }
      .order-list-box {
        display: flex;
        padding-top: 0.4rem;
        border-bottom: 1px solid #dcdcdc;
        div {
          flex: 3;
          padding: 0.5rem;
        }
        ul {
          flex: 7;
          padding-right: 0.5rem;
          li {
            font-size: 0.469rem;
            line-height: 1.3rem;
            &:nth-of-type(1) {
              font-size: 0.554rem;
            }
          }
        }
      }
    }
    .pay {
      li {
        background: #fff;
        padding: 0 0.5rem;
        font-size: 0.554rem;
        line-height: 1.7rem;
        &:nth-of-type(1) {
          border-top: 1px solid #dcdcdc;
          border-bottom: 1px solid #dcdcdc;
          margin: 0.5rem 0;
        }
        &:nth-of-type(2) {
          border-top: 1px solid #dcdcdc;
          border-bottom: 1px solid #dcdcdc;
          margin: 0rem 0 0.5rem;
        }
        &:nth-of-type(3) {
          border-top: 1px solid #dcdcdc;
        }
        &:nth-last-of-type(2) {
          border-top: 1px solid #dcdcdc;
          line-height: 1rem;
          padding-top: 0.5em;
          span {
            font-size: 0.628rem;
          }
        }
        &:nth-last-of-type(1) {
          line-height: 1rem;
          padding-bottom: 0.5rem;
          margin-bottom: 2rem;
        }
        span {
          float: right;
        }
      }
    }
    .funBtn {
      height: 2.6rem;
      background: #fff;
      border-top: 1px solid #dcdcdc;
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 750px;
      a {
        float: right;
        width: 3.11rem;
        line-height: 1.1rem;
        border: 1px solid #ff9500;
        border-radius: 25px;
        font-size: 0.554rem;
        text-align: center;
        color: #ff9500;
        margin: 0.65rem 0.5rem 0 0;
      }
    }
  }
</style>
